<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <style>
      body {
        background-color: #1f2029;
      }
      .row {
        perspective: 500px;
      }
      .card {
        background-color: #2a2b38;
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;

        padding: 20px;
        transition: all 1s;
      }
      .card.active {
        transform: rotateY(180deg);
      }
      .card .login {
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateZ(20px);
        /* backface-visibility: hidden; */
      }
      .card .zhuce {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotateY(180deg) translateZ(20px);
        padding: 20px;
        /* backface-visibility: hidden; */
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .switch {
        width: 100px;
        height: 20px;
        background-color: white;
      }
      .switch span {
        width: 20px;
        height: 20px;
        background-color: red;
        display: block;
        transition: all 1s;
      }
      .switch.active span {
        transform: translateX(80px) rotateZ(360deg);
      }
    </style>
  </head>
  <body>
    <h1>你好，世界！</h1>
    <label>
      <input type="checkbox" id="toggle" style="display: none" />
      <div class="switch">
        <span></span>
      </div>
    </label>

    <div class="row">
      <div class="col-xs-4 col-xs-offset-4 card">
        <section class="login">
          <div>
            <h1>登录</h1>
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1">@</span>
              <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
            </div>
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1">@</span>
              <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
            </div>
            <button>登录</button>
          </div>
        </section>

        <section class="zhuce">
          <div>
            <h1>注册</h1>
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1">@</span>
              <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
            </div>
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1">@</span>
              <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
            </div>
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1">@</span>
              <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
            </div>
            <button>注册</button>
          </div>
        </section>
      </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script
      src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
      integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
      crossorigin="anonymous"
    ></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>

    <script>
      $("#toggle").change(function () {
        // console.log($('#toggle'));
        // console.log($("#toggle").prop("checked"));
        if ($("#toggle").prop("checked")) {
          $(".card").addClass("active");
          $(".switch").addClass("active");
        } else {
          $(".card").removeClass("active");
          $(".switch").removeClass("active");
        }
      });
    </script>
  </body>
</html>
